<div nz-row [nzGutter]="16">
  <div nz-col [nzMd]="24">
    <div nz-row style="height: 60px;" [nzType]="'flex'" [nzJustify]="'space-around'" [nzAlign]="'middle'">
      <nz-col [nzSpan]="24">
        <form nz-form [nzLayout]="'inline'">
          <nz-form-item>
            <nz-form-control>
              <button nz-button [nzType]="'primary'" (click)="showModify()">{{'modify.text.add' | translate}}</button>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-control>
              <button nz-button [nzType]="'primary'" (click)="refresh()">
                <i class="anticon anticon-sync"></i>
              </button>
            </nz-form-control>
          </nz-form-item>
        </form>
      </nz-col>
    </div>
    <div nz-row>
      <nz-table #nzTable
        nzSize="middle"
        [nzData]="data"
        nzFrontPagination="false"
        nzShowSizeChanger="true"
        nzShowQuickJumper="true"
        [nzLoading]="_loading"
        [(nzPageIndex)]="page.pageNo"
        [(nzPageSize)]="page.pageSize"
        [nzTotal]="page.total"
        (nzPageIndexChange)="getAllRoles()"
        (nzPageSizeChange)="getAllRoles(true)"
        [nzShowTotal]="pagination"
      >
        <thead nz-thead>
          <tr>
            <th nz-th><span>角色名称</span></th>
            <th nz-th><span>角色描述</span></th>
            <th nz-th><span>更新时间</span></th>
            <th nz-th [nzWidth]="'20%'"><span>操作</span></th>
          </tr>
        </thead>
        <tbody nz-tbody>
          <tr nz-tbody-tr *ngFor="let data of nzTable.data">
            <td nz-td>{{data.name}}</td>
            <td nz-td>{{data.rDesc}}</td>
            <td nz-td>{{data.gmtModified | date:'yyyy-MM-dd HH:mm:ss'}}</td>
            <td nz-td>
              <a (click)="showModify(data)">{{'modify.text.edit' | translate}}</a>
              <nz-divider nzType="vertical"></nz-divider>
              <nz-popconfirm [nzTitle]="'modify.text.delete_tip'|translate" (nzOnConfirm)="delete(data.id)" [nzPlacement]="'top'">
                <a nz-popconfirm>{{'modify.text.delete' | translate}}</a>
              </nz-popconfirm>
              <nz-divider nzType="vertical"></nz-divider>
              <a (click)="permissionSet(data)">{{'modify.text.permission_set' | translate}}</a>
            </td>
          </tr>
        </tbody>
      </nz-table>
      <ng-template #pagination>
        {{'list.text.pagination' | translate}} {{page.total}} {{'list.text.article' | translate}}
      </ng-template>
    </div>
  </div>
</div>
